<template>
  <el-card>
    <div class="home-top">
      <div class="avatar">
        <svg-icon name="icon-stars"></svg-icon>
      </div>
      <div class="info">
        <h2>{{ getTime() }}好，{{ user.username }}</h2>
        <p>{{ title }}</p>
      </div>
    </div>
  </el-card>
  <div class="svgIcon">
    <SvgIcon name="icon-preserveColor/welcome"></SvgIcon>
  </div>
</template>

<script setup lang="ts">
const user = useUserStore();
const title = computed(() => import.meta.env.VITE_APP_TITLE);
</script>

<style lang="scss" scoped>
.home-top {
  display: flex;
  .avatar {
    font-size: 100px;
  }
  .info {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 20px;

    h2 {
      font-size: 40px;
    }
    p {
      font-size: 20px;
      color: #409eff;
    }
  }
}

.svgIcon {
  display: flex;
  justify-content: center;
  font-size: 600px;
}
</style>
